<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Options</title>
        <link rel="stylesheet" type="text/css" href="mdl/material.min.css">
        <script src="mdl/material.min.js"></script>
        <link rel="stylesheet" type="text/css" href="mdl/material-icons.css">
        <link href="mdl/dialog-polyfill.min.css" rel="stylesheet">
        <script src="mdl/dialog-polyfill.min.js"></script>
    </head>
    <body>
        <div class="mdl-layout mdl-js-layout">
            <div class="mdl-layout__header">
                <div class="mdl-layout__header-row">
                    <span class="mdl-layout-title">Options</span>
                    <div class="mdl-layout-spacer"></div>
                    <nav class="mdl-navigation">
                        <a id="info-dialog-handle" class="mdl-navigation__link" href="#">
                            <i class="material-icons">info</i>
                        </a>
                    </nav>
                </div>
            </div>
            <div class="mdl-layout__drawer"></div>
            <div class="mal-layout__content">
            
            </div>
        </div>
        <!-- fab -->
        <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--raised mdl-button--accent" style="position: fixed; right:30px; bottom: 30px">
            <i class="material-icons">add</i>
        </button>
        <!-- info dialog -->
        <dialog class="mdl-dialog" id="info-dialog" style="width: 600px;">
            <div class="mdl-dialog__title">About</div>
            <div class="mdl-dialog__content">
                <p>在Chromium内核的浏览器上读取并解析Markdown文件</p>
                <p>版本：0.0.1.SPAPSHOT</p>
                <div>解析Markdown文件</div>
                <div>当本地文件有变化时自动加载</div>
                <div>高亮代码区域</div>
                <div>在内容右侧显示目录</div>
                <div>支持扩展: Tasklist, table, LaTeX</div>
                <div>在内容区域外双击可以在代码模式和预览模式见切换</div>
            </div>
            <div class="mdl-dialog__actions">
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect close">OK</button>
            </div>
        </dialog>
        <script type="text/javascript" src="options.js"></script>
    </body>
</html>
